<template>
  <div class="header container">
    <div class="nav">
        <ul class="transition_all" v-bind:style="{ 'opacity': istop!=0?1:0 ,'width': istop!=0?'500px':'2.8rem'}">
            <li>
                <router-link to="/dashboard" active-class="active-nav-link">
                    <a href="#">主页</a>
                </router-link>
            </li>
            <li>
                <router-link to="/memoryLog" active-class="active-nav-link">
                    <a href="#">记忆录</a>
                </router-link>
            </li>
            <li>
                <router-link to="/map" active-class="active-nav-link">
                    <a href="#">地图</a>
                </router-link>
            </li>
            <li>
                <router-link to="/recreationGame" active-class="active-nav-link">
                <a href="#">娱乐</a>
                </router-link>
            </li>
            <li>
                <router-link to="/paint" active-class="active-nav-link">
                    <a href="#">画图</a>
                </router-link>
            </li>
            <div class="nav-box"></div>
        </ul>
            <!-- 汉堡图标，滑动后显示 -->
        <div class="threeBars transition_all" v-bind:style="{ 'opacity': istop==0?1:0}" @mouseenter="MouseEnter" @mouseleave="MouseLeave">
            <svg class="svg-class" width="2.5rem" height="2.5rem" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.94971 11.9497H39.9497" stroke="var(--ground-glass-icon-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7.94971 23.9497H39.9497" stroke="var(--ground-glass-icon-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7.94971 35.9497H39.9497" stroke="var(--ground-glass-icon-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
    
    <div class="headerRight flex justify-end">
            <div class="button-class" @click="swapThemeEvent">
                <svg v-show="nowThemeIndex == 0" class="svg-class" viewBox="0 0 24 24" width="1em"
                height="1em">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10-6h1M12 2V1m0 22v-1m8-2l-1-1m1-15l-1 1M4 20l1-1M4 4l1 1m-4 7h1">
                </path>
                </svg>
                <svg v-show="nowThemeIndex == 1" class="svg-class" viewBox="0 0 24 24" width="1em"
                height="1em" style="">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M3 11.507a9.493 9.493 0 0 0 18 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 0 0 3 11.507">
                </path>
                </svg>
            </div>
            <div class="button-class">
                <svg class="svg-class" viewBox="0 0 24 24" width="1em" height="1em">
                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                    <path d="M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6"></path>
                    <path
                    d="m19.622 10.395l-1.097-2.65L20 6l-2-2l-1.735 1.483l-2.707-1.113L12.935 2h-1.954l-.632 2.401l-2.645 1.115L6 4L4 6l1.453 1.789l-1.08 2.657L2 11v2l2.401.656L5.516 16.3L4 18l2 2l1.791-1.46l2.606 1.072L11 22h2l.604-2.387l2.651-1.098C16.697 18.832 18 20 18 20l2-2l-1.484-1.75l1.098-2.652l2.386-.62V11z">
                    </path>
                </g>
                </svg>
            </div>
    </div>
    
  </div>
</template>

<script setup>
    import { onBeforeMount, onMounted,onUnmounted , ref  } from "vue";
    import { storeToRefs } from "pinia";
    import { useThemeSwapStore } from "@/stores/themeSwap.js";
    import { useScrollTopStore } from "@/stores/scrollTop";
    const { changeTheme } = useThemeSwapStore()
    const { handleMouseEnter,handleMouseLeave } = useScrollTopStore()
    let {
    nowThemeIndex //当前主题索引
    } = storeToRefs(useThemeSwapStore());

    let {
    istop //当前滚动是否为top
    } = storeToRefs(useScrollTopStore());

    //切换主题事件
    const swapThemeEvent = () => {
    changeTheme()
    }
    const MouseEnter = (event) => {
        if(istop.value!=0) return
        handleMouseEnter()
    };
 
    const MouseLeave = (event) => {
        handleMouseLeave()
    };
</script>

<style lang="scss" scoped>
.active-nav-link > a {
    background-image: linear-gradient(90deg, #818181, #4f5af5, #fd82e3);
    -webkit-background-clip: text;
    color: transparent; /* 这一步是关键，将文字颜色设置为透明，以显示背景渐变 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    transform: scale(1.1);
    // transition: all 0.5s cubic-bezier(0.23,1,0.32,1.05);
}

    .header {
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        
        .headerRight {
            position: fixed;
            top: 1.25rem;
            right: 1rem;
            
        }
        .button-class { 
                margin-right: 0.6rem;
                // margin: 5px 10px 5px 0;
                @apply w-[2.5rem] h-[2.5rem] rounded-full text-[var(--ground-glass-icon-color)] flex justify-center items-center bg-[var(--head-background-color)] backdrop-blur-2xl;
                @apply hover:scale-110 hover:bg-[var(--head-background-color)] transition-all duration-[200ms] ease-in-out;
                border: 2px solid #a9aaa9;
                box-shadow: 0px 0px 1px 0px #fffc;
            }

            .button-class:hover .svg-class {
            transition: all 0.2s ease-in-out;
            transform: scale(1.1);
            }
            .svg-class {
                width: 21px;
                height: 21px;
            }
        }
    .nav{ 
            position: fixed;
            top: 1.25rem;
            right: 8rem;
            // width: 500px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            /* background-color: rgba(var(--ground-content-background-color),0.9); */
            /* opacity: 0; */
            background-color: var(--head-background-color);
            transition: all 0.8s linear;
        }
        .threeBars {
            position: fixed;
            top: 1.25rem;
            right: 7.5rem;
            
                margin-right: 0.6rem;
                // margin: 5px 10px 5px 0;
                @apply w-[2.5rem] h-[2.5rem] rounded-full text-[var(--ground-glass-icon-color)] flex justify-center items-center backdrop-blur-2xl;
                @apply hover:scale-110 hover:bg-[] transition-all duration-[200ms] ease-in-out;
        }
        .nav ul{ 
            width: 500px;
            height: 2.5rem;
            display: flex;
            align-items: center;
            right: 5%;
        }
        .nav ul .nav-box{ 
            position: absolute;
            bottom: 0;
            left: 0;
            /* 如果导航栏就六个导航，那么每个导航的宽度都是整个导航
            的六分之一 */
            width: calc((100% / 5)*1);
            height: 5px;
            border-radius: 2px;
            transition: .5s;
            cursor: pointer;
        }
        .nav ul li{ 
            width: 100%;
            text-align: center;
        }
        .nav ul li:nth-child(1):hover~.nav-box{ 
            left: calc(100% / 5 *0);
            background-color: rgb(250, 190, 250);
        }
        .nav ul li:nth-child(2):hover~.nav-box{ 
            left: calc(100% / 5 *1);
            background-color: rgb(0, 225, 255);
        }
        .nav ul li:nth-child(3):hover~.nav-box{ 
            left: calc(100% / 5 *2);
            background-color: #b971b3;
        }
        .nav ul li:nth-child(4):hover~.nav-box{ 
            left: calc(100% / 5 *3);
            background-color: #ffb1b1;
        }
        .nav ul li:nth-child(5):hover~.nav-box{ 
            left: calc(100% / 5 *4);
            background-color: #8da1f8;
        }
</style>